<fieldset class="section">
    <legend>Lọc thông tin</legend>
    <table class="table-tools">
        <colgroup>
            <col style="width: 20px;">
            <col>
        </colgroup>
        <tr>
            <td><label for="txtThongTin"><span class="fa fa-search"></span></label></td>
            <td><input type="text" id="txtThongTin" style="width: 300px;" placeholder="Nợ tối thiểu" value="0"></td>
        </tr>
    </table>

    <button type="button" onclick="CongNo.TimKiemCongNo();" style="margin-top: 5px;"><span style="display: none;" class="fa-loading fa fa-spin fa-refresh"></span> Tìm kiếm</button>
    <button type="button" onclick="CongNo.HienThiTatCa();" style="float: right; margin-top: 5px;"><span style="display: none;" class="fa-loading fa fa-spin fa-refresh"></span> Xem tất cả</button>
</fieldset>

<fieldset class="section" style="margin-top: 30px;">
    <legend>Danh sách khách hàng</legend>

    <input id="txtTimKhachHang" onkeydown="CongNo.TimKhachHang(this, event);" placeholder="Nhập tên khách hàng hoặc số điện thoại" style="width: 500px;" />

    <h4 style="margin-top: 5px;">Click chọn hàng trong bảng bên dưới để xem thông tin</h4>
    <table class="table-views" style="margin-top: 10px;">
        <colgroup>
            <col style="width: 50px;">
            <col style="width: 250px;">
            <col style="width: 250px;">
        </colgroup>
        <thead>
            <tr>
                <td>STT</td>
                <td>Họ tên</td>
                <td>Số điện thoại</td>
                <td>Địa chỉ</td>
            </tr>
        </thead>
    </table>

    <div style="max-height: 200px; overflow-y: auto;">
        <table class="table-views">
            <colgroup>
                <col style="width: 50px;">
                <col style="width: 250px;">
                <col style="width: 250px;">
            </colgroup>
            <tbody>
                <tr class="default-row" style="display: none;" onclick="CongNo.XemChiTiet(this);">
                    <td class="congno" style="display: none;"></td>
                    <td class="stt" style="text-align: center;"></td>
                    <td class="hoten"></td>
                    <td class="sodienthoai" style="text-align: center;"></td>
                    <td class="diachi"></td>
                </tr>
                <tr class="tr-loading">
                    <td colspan="4" style="text-align: center;">
                        <span class="fa fa-spin fa-refresh"></span> Đang tải danh sách...
                    </td>
                </tr>
            </tbody>
            <tbody id="container">

            </tbody>
        </table>
    </div>
</fieldset>



<fieldset class="section" style="margin-top: 30px;">
    <legend>Thông tin chi tiết</legend>
    <table class="table-tools" id="thongtinchitiet">
        <colgroup>
            <col style="width: 150px;">
            <col>
        </colgroup>
        <tr>
            <td>Khách hàng:</td>
            <td class="khachhang">...</td>
        </tr>
        <tr>
            <td>Tổng nợ:</td>
            <td class="tongno">...</td>
        </tr>
        <tr>
            <td>Số lần mua hàng: </td>
            <td class="solanmua">...</td>
        </tr>
        <tr>
            <td>Tổng hóa đơn: </td>
            <td class="tonggiatri">...</td>
        </tr>
    </table>

    <button style="margin-top: 10px;" onclick="CongNo.XemChiTietGiaoDich(this);" disabled type="button" id="button-chitiet" data-text=""><span class="fa-loading fa fa-spin fa-refresh" style="display: none;"></span> Chi tiết giao dịch</button>
    <table class="table-views" style="margin-top: 20px;">
        <colgroup>
            <col style="width: 50px;">
            <col style="width: 150px;">
            <col style="width: 250px;">
            <col>
        </colgroup>
        <thead>
        <tr>
            <td>STT</td>
            <td>Thời gian</td>
            <td>Số tiền</td>
            <td>Ghi chú</td>
        </tr>
        </thead>
    </table>
    <div style="max-height: 200px; overflow-y: auto;">
        <table class="table-views">
            <colgroup>
                <col style="width: 50px;">
                <col style="width: 150px;">
                <col style="width: 250px;">
                <col>
            </colgroup>
            <tbody>
                <tr class="default-row" style="display: none;">
                    <td class="stt" style="text-align: center;">STT</td>
                    <td class="thoigian">Thời gian</td>
                    <td class="sotien" style="text-align: center;">Số tiền</td>
                    <td class="ghichu">Ghi chú</td>
                </tr>
            </tbody>
            <tbody id="container-chitiet">

            </tbody>
        </table>
    </div>
</fieldset>


<fieldset class="section" style="margin-top: 30px;">
    <legend>Quyết toán công nợ (trả tiền)</legend>
    <table class="table-tools">
        <colgroup>
            <col style="width: 150px;">
            <col>
        </colgroup>
        <tr>
            <td>Khách hàng</td>
            <td id="txtKhachHang">...</td>
        </tr>
        <tr>
            <td>Số tiền (nợ hoặc trả)</td>
            <td><input id="txtCongNo" disabled type="text" value="0" /></td>
        </tr>
        <tr>
            <td>Ghi chú</td>
            <td><textarea id="txtGhiChu" disabled style="width: 500px; height: 100px; resize: none;"></textarea></td>
        </tr>
    </table>
    <button id="button-quyettoan" onclick="CongNo.QuyetToanCongNo(this);" disabled type="button"><span class="fa-loading fa fa-spin fa-refresh" style="display: none;"></span> Quyết toán</button>
</fieldset>

<script>

    $("#txtThongTin").autoNumeric(
        'init', {aSep: ',', mDec: '0', vMax: '999999999999999'}
    );
    $("#txtCongNo").autoNumeric(
        'init', {aSep: ',', mDec: '0', vMax: '999999999999999', vMin: '-999999999999999'}
    );

    CongNo.DanhSachKhachHang();
</script>